<!DOCTYPE html>
<html>
<head>
    <title>Velocity Distribution Graph</title>
</head>
<body>
    <canvas id="physics-graph" width="400" height="320"></canvas>
    <script>
        const canvas = document.getElementById('physics-graph');
        const ctx = canvas.getContext('2d');

        // Define coordinate system parameters and scaling
        const originX = 60;
        const originY = 270;
        const axisLengthX = 280;
        const axisLengthY = 220;

        // The positions on the graph are relative to the origin
        const v0_dist = 100; // a distance representing v₀ in pixels
        const a_dist = 160; // a distance representing 'a' in pixels

        // Calculate absolute coordinates for key points
        const v0_x = originX + v0_dist;
        const v2v0_x = originX + 2 * v0_dist;
        const a_y = originY - a_dist;

        // --- Draw Axes ---
        ctx.beginPath();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;

        // X-axis (ν-axis)
        ctx.moveTo(originX, originY);
        ctx.lineTo(originX + axisLengthX, originY);
        // Arrowhead for X-axis
        ctx.moveTo(originX + axisLengthX, originY);
        ctx.lineTo(originX + axisLengthX - 10, originY - 5);
        ctx.moveTo(originX + axisLengthX, originY);
        ctx.lineTo(originX + axisLengthX - 10, originY + 5);

        // Y-axis (Nf(ν)-axis)
        ctx.moveTo(originX, originY);
        ctx.lineTo(originX, originY - axisLengthY);
        // Arrowhead for Y-axis
        ctx.moveTo(originX, originY - axisLengthY);
        ctx.lineTo(originX - 5, originY - axisLengthY + 10);
        ctx.moveTo(originX, originY - axisLengthY);
        ctx.lineTo(originX + 5, originY - axisLengthY + 10);
        ctx.stroke();

        // --- Draw Labels and Ticks ---
        ctx.fillStyle = 'black';
        ctx.font = 'italic 20px Times New Roman';

        // Origin label 'O'
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('O', originX - 15, originY + 5);

        // Axis labels
        ctx.fillText('ν', originX + axisLengthX + 10, originY - 12);
        ctx.textAlign = 'right';
        ctx.textBaseline = 'bottom';
        ctx.fillText('Nf(ν)', originX + 25, originY - axisLengthY - 5);

        // Tick labels on axes
        ctx.font = 'italic 18px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';

        // 'ν₀' label
        // Unicode for subscript zero is U+2080
        ctx.fillText('ν₀', v0_x, originY + 8);

        // '2ν₀' label (composite)
        const font_normal_18 = '18px Times New Roman';
        const font_italic_18 = 'italic 18px Times New Roman';
        ctx.font = font_normal_18;
        const w2 = ctx.measureText('2').width;
        ctx.font = font_italic_18;
        const wv0 = ctx.measureText('ν₀').width;
        const total_w_2v0 = w2 + wv0;
        const start_x_2v0 = v2v0_x - total_w_2v0 / 2;
        ctx.font = font_normal_18;
        ctx.fillText('2', start_x_2v0 + w2/2 -2, originY + 8);
        ctx.font = font_italic_18;
        ctx.fillText('ν₀', start_x_2v0 + w2 + wv0/2 -2, originY + 8);

        // 'a' label
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText('a', originX - 8, a_y);

        // --- Draw Dashed Helper Lines ---
        ctx.save();
        ctx.setLineDash([4, 4]);
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'black';

        // Horizontal dashed line from y-axis to (ν₀, a)
        ctx.beginPath();
        ctx.moveTo(originX, a_y);
        ctx.lineTo(v0_x, a_y);
        ctx.stroke();

        // Vertical dashed line from x-axis to (ν₀, a)
        ctx.beginPath();
        ctx.moveTo(v0_x, originY);
        ctx.lineTo(v0_x, a_y);
        ctx.stroke();
        
        // Vertical dashed line from x-axis to (2ν₀, a)
        ctx.beginPath();
        ctx.moveTo(v2v0_x, originY);
        ctx.lineTo(v2v0_x, a_y);
        ctx.stroke();
        
        ctx.restore();

        // --- Draw the Main Graph Function ---
        ctx.beginPath();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2.5;
        // Line from (0, 0) to (ν₀, a)
        ctx.moveTo(originX, originY);
        ctx.lineTo(v0_x, a_y);
        // Line from (ν₀, a) to (2ν₀, a)
        ctx.lineTo(v2v0_x, a_y);
        ctx.stroke();

    </script>
</body>
</html>